//引入重置样式
require('../../assets/css/reset.css')

//引入公共样式
require('../../assets/css/property.css')

//引入首页样式
require('./home.less')

//引入封装的dom
require('../../assets/js/dom.js')

//复用的basic
require('../../assets/css/basic.less');

//引入swiper
const mySwiper = require('swiper')

//引入swiper的css
require('swiper/dist/css/swiper.min.css')

//获取axios工具函数
const request = require('../../utils/request')

//引入tabbar渲染函数
const renderTabber = require('../../utils/tabbar')

function getMsg() {
    //如果错误显示信息提示框
    msg.style.display = 'block';

    // 计时器，1秒之后隐藏信息提示框
    setTimeout(() => {
        msg.style.display = 'none';
    }, 1000);
}


//等待dom加载完毕之后操作dom
document.ready(() => {
    //调用函数
    renderTabber('home');

    //获取dom
    const rankNo = document.querySelector('#rankNo');
    const clock = document.querySelector('#clockIn-box');
    const clockDay = document.querySelector('#clockDay');
    const badge = document.querySelector('#badge');
    const msg = document.querySelector('#msg');
    const course = document.querySelector('#course');

    //使用swiper
    let mySwiper = new Swiper('.swiper-container', {
        autoplay: 2000, //可选选项，自动滑动
        initialSlide: 0,
        pagination: '.swiper-pagination', //分页器
        loop: true, //无限循环
    })

    //获取打卡信息
    function getClockInfo() {
        request.get('/api/user/clockInInfo').then(res => {
            //解构数据
            let { errno, data, message } = res.data
                //判断
            if (errno === 0) {
                if (data.isClockIn) {
                    clock.textContent = '打卡成功';
                    clock.className = 'clocked';
                } else {
                    clock.textContent = '今日打卡';
                    clock.className = 'clockIn-box';
                }
            } else {
                getMsg();
                msg.innerHTML = message;
            }
        })
    }

    //初始化调用一次
    getClockInfo()

    //获取用户信息
    function getUserInfo() {
        request.get('/api/user/info').then(res => {
            //1 解构数据
            let { errno, data, message } = res.data;
            //2 判断
            if (errno === 0) {
                //3 处理业务逻辑
                render(data);
            } else {
                getMsg();
                msg.innerHTML = message;
            }
        })
    }

    //渲染函数 渲染dom更新dom
    function render(data) {
        rankNo.textContent = data.ranking
        clockDay.textContent = data.clockCount
        badge.textContent = data.badges
    }

    //初始化调用一次
    getUserInfo();

    //点击打卡
    clock.addEventListener('click', () => {
        request.post('/api/user/clockIn').then(res => {

            //解构数据
            let { errno, message } = res.data;
            //判断
            if (errno === 0) {
                //打卡成功 重新请求数据 自动渲染
                getUserInfo();
                getClockInfo();
            } else {
                getMsg();
                msg.innerHTML = message;
            }
        })
    })

    course.addEventListener('click', () => {
        // console.log(1);
        location.href = './course.html';
    })
})